<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>6.圆角阴影渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 400px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            border-radius: 50%;
            box-shadow: 0px 0px 10px 10px #000;
            /* inset表示阴影向内 */
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            color: #fff;
            line-height: 200px;
            text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 3px -10px 6px #fd3, -3px -15px 11px #C90, 3px -25px 18px #f20;
            background-image: linear-gradient(red 50%, blue 50%);
        }
    </style>

</head>

<body>


    <div>div</div>

    <!-- 
		 圆角
			border-radius  四个值 左上  右上  右下  左下
					八个值  x左上  x右上  x右下  x左下 / y左上  y右上  y右下  y左下
		阴影  
			盒子阴影  box-shadow  阴影x位置  阴影y位置  阴影模糊程度  阴影的大小 阴影的颜色  内阴影inset
				     box-shadow: 0px 0px 0px 0px #000 inset;
					文字阴影  text-shadow   阴影x位置  阴影y位置  阴影模糊程度 
					text-shadow: 0px 0px 0px #000;
			
			火焰文字text-shadow:0 0 4px white,
				0 -5px 4px #ff3,
				3px -10px 6px #fd3,
				-3px -15px 11px #C90,
				3px -25px 18px #f20;
		渐变
		
		background-image: conic-gradient(#69f, #fd44ff);
		 
		 -->
</body>

</html>